 /* B站关注用户“前端技术教程”看视频教程 */
 * {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
 }
 body {
	 height: 100vh;
	 background: #9B59B6;
	 display: flex;
	 justify-content: center;
	 align-items: center;
 }
 .clock {
	 width: 350px;
	 height: 350px;
	 /* QQ:881234513 */
	 background: white url(../img/clock.png);
	 background-size: cover;
	 border-radius: 50%;
	 border: 20px solid white;
	 box-shadow: inset 0 0 30px rgba(0,0,0,.1),
				 0 20px 20px rgba(0,0,0,.3),
				 0 0 0 4px white;
	display: flex;
	justify-content: center;
	align-items: center;
 }
 .clock::before {
	 content: '';
	 width: 15px;
	 height: 15px;
	 position: absolute;
	 z-index: 5;
	 background: gray;
	 border-radius: 50%;
	 border: 2px solid white;
 }
 .hour,.min,.sec {
	 position: absolute;
 }
 .hour, .hr {
	 width: 160px;
	 height: 160px;
 }
 .min, .mn {
 	 width: 190px;
 	 height: 190px;
 }
 .sec, .sc {
 	 width: 230px;
 	 height: 230px;
 }
 .hr,.mn,.sc {
	 display: flex;
	 justify-content: center;
	 position: absolute;
 }
 .hr::before {
	 width: 8px;
	 height: 80px;
	 background: gray;
	 content: '';
	 border-radius: 6px 6px 0 0;
 }
 .mn::before {
 	 width: 4px;
 	 height: 90px;
 	 background: darkgray;
 	 content: '';
 	 border-radius: 6px 6px 0 0;
 }
 .sc::before {
 	 width: 2px;
 	 height: 155px;
 	 background: red;
 	 content: '';
 	 border-radius: 6px 6px 0 0;
 }
 
 